<template>
   <el-dialog :title="!form.id ? '新增' : '修改'" :visible.sync="visible" :close-on-click-modal="false" width="70%" top="10vh">
    <el-form :model="form" label-width="120px" ref="dataForm">
      <el-row>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="姓名" prop="name" :rules="rules.isRange('1-10')">
            <el-input v-model="form.name" placeholder="请输入姓名" maxlength="10" show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="手机号" prop="mobile" :rules="rules.isPhone">
            <el-input v-model="form.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="邮箱" prop="email" :rules="rules.isEmail">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="30" show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="个人头像" prop="icon" :rules="rules.isNotNull">
            <el-upload action="" :file-list="iconList"
              :limit=1 list-type="picture" accept="image/*" v-model="form.icon"
              :on-remove="(value) => fileRemove(value, 'icon', 'iconList')"
              :http-request="(value) => fileUpload(value, 'icon', 'iconList')">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="公司图片" prop="logos" :rules="rules.isNotNull">
            <el-upload action="" :file-list="logosList"
              :limit=1 list-type="picture" accept="image/*" v-model="form.logos"
              :on-remove="(value) => fileRemove(value, 'logos', 'logosList')"
              :http-request="(value) => fileUpload(value, 'logos', 'logosList')">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="状态" prop="status" :rules="rules.isNotNull">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="省份" prop="provinceId" :rules="rules.isNotNull">
            <el-select style="width: 100%" v-model="form.provinceId" filterable placeholder="请选择省份" @change="changeProvince()">
              <el-option v-for="item in provinceList" :key="item.value" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="城市" prop="cityId" :rules="rules.isNotNull">
            <el-select style="width: 100%" v-model="form.cityId" filterable placeholder="请选择城市" @change="changeCity()">
              <el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="区域" prop="areaId" :rules="rules.isNotNull">
            <el-select style="width: 100%" v-model="form.areaId" filterable placeholder="请选择区域">
              <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="个人描述">
          <div id="perDescriptionEditor"></div>
        </el-form-item>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-close" @click.native="visible = false">取消</el-button>
      <el-button size="small" icon="el-icon-check" type="primary" :loading="isDisabled"
		  @click.native="saveOrUpdateForm(form, '/partner/save', '/partner/update')">确定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        rules: this.getRules(),
        isDisabled: false,
        iconList: [],
        logosList: [],
        perDescriptionEditor: '',
        provinceList: [],
        cityList: [],
        areaList: [],
        form: {
          name: '',
          mobile: '',
          email: '',
          icon: '',
          logos: '',
          provinceId: '',
          cityId: '',
          areaId: '',
          perDescription: '',
          tenantId: '',
          status: 0,
          flag: 1
        }
      }
    },
    methods: {
      saveOrUpdateForm (form, saveUrl, updateUrl) {
        // 清空原来上传的图片, 否则再次打开弹窗仍然会显示上次上传的图片 闪动
        // this.$refs.icon.clearFiles()
        // this.$refs.logos.clearFiles()
        form['perDescription'] = this.perDescriptionEditor.txt.html()
        this.saveOrUpdate(form, saveUrl, updateUrl)
      },
      init (id) {
        this.visible = true
        this.isDisabled = false
        this.$nextTick(() => {
          this.perDescriptionEditor = this.initMultiText('#perDescriptionEditor', this.perDescriptionEditor)
          this.perDescriptionEditor.create()
          this.$refs['dataForm'].resetFields()
        })
        this.form.id = id
        if (id) {
          this.httpGet(`/partner/info/${id}`).then(res => {
            this.form = res.data
            this.iconList = this.urlListHandle(this.form.icon)
            this.logosList = this.urlListHandle(this.form.logos)
            this.perDescriptionEditor.txt.html(this.form.perDescription)
            this.initArea(this.form)
          })
        } else {
          this.getRegionInfo(1, 0)
          this.iconList = []
          this.logosList = []
        }
      }
    }
  }
</script>

